<!--
 * @Author: 沉着冷静 2478261806@qq.com
 * @Date: 2024-08-28 14:39:49
 * @LastEditors: 沉着冷静 2478261806@qq.com
 * @LastEditTime: 2024-08-28 15:29:07
 * @FilePath: \elm-0828\src\views\CartView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script>
export default {
    data() {
        return {
            goods: [
                { id: 250, name: "matebook x", price: 8999.00, amount: 2 },
                { id: 222, name: "xiaomi book", price: 6999.00, amount: 2 }
            ]
        }
    },
    computed: {
        totalPrice(){
            let sum = 0;
            for(let i = 0; i < this.goods.length; i++ ) {
                let g = this.goods[i];
                let subTotal = g.price * g.amount;
                sum = sum + subTotal;
            }
            return sum;
        }
    },
    methods: {
        remove(id){
            // 遍历数组
            for(let i = 0 ; i < this.goods.length; i++ ) {
                // 根据索引获取数组元素
                let g = this.goods[i];
                // 判断当前元素的 id 是否与参数传入的 id 相等
                if( g.id == id ) {
                    // 删除满足条件的单个元素(即将当前元素从数组中删除)
                    this.goods.splice(i, 1); // 删除下标是 i 的 1 个元素
                }
            }
        },
        reduce(id) {
            const index = this.goods.findIndex(g => g.id === id);
            if (index !== -1) {
                this.goods[index].amount--;
                if (this.goods[index].amount === 0) {
                    this.remove(id);
                }
            }
        },
        increase(id) {
            const index = this.goods.findIndex(g => g.id === id);
            if (index !== -1) {
                this.goods[index].amount++;
            }
        }
    }
}
</script>

<template>
    <div>
        <h5>购物车</h5>
        <el-table :data="goods">
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column label="商品名称" prop="name" />
            <el-table-column label="单价" prop="price" />
            <el-table-column label="数量" prop="amount" />
            <el-table-column>
                <template #header>数量</template>
                <template #default="{row}">
                    <el-button type="primary" size="small" @click="reduce(row.id)">-</el-button>
                    {{ row.amount }}
                    <el-button type="primary" size="small" @click="increase(row.id)">+</el-button>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>小计</template>
                <template #default="{ row }">{{ row.price * row.amount }}</template>
            </el-table-column>
            <el-table-column>
                <template #default="{row}">
                    <el-button type="primary" size="small" @click="remove(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="6" :offset="18">总价: {{ totalPrice }}</el-col>
        </el-row>
        <p>
            作业：
            参照“删除”按钮的操作，实现 “-” 和 “+” 按钮的操作
        </p>
    </div>
</template>